:root {
  --primary-brown: #8d6748;
  --primary-brown-dark: #6e4f32;
  --primary-brown-light: #bfa084;
  --background: #f9f6f2;
  --card-bg: #fff;
  --text-main: #4e3b2c;
  --text-light: #a58b74;
  --border-radius: 4px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  background-color: var(--background);
  color: var(--text-main);
}

body {
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--text-main);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primary-brown-dark);
  margin-bottom: 0.5em;
}

a {
  color: var(--primary-brown);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--primary-brown-dark);
}

button, .el-button {
  border-radius: var(--border-radius);
  color: #fff;
  transition: background 0.2s, box-shadow 0.2s;
}

.el-button--primary {
  background-color: var(--primary-brown) !important;
  border-color: var(--primary-brown) !important;
}

.el-button--primary:hover, .el-button--primary:focus {
  background-color: var(--primary-brown-dark) !important;
  border-color: var(--primary-brown-dark) !important;
  box-shadow: 0 4px 12px rgba(141, 103, 72, 0.2);
}

.el-card, .card {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  border: none !important;
  margin-bottom: 1.5em;
}

.el-table {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.el-table th.el-table__cell {
  background-color: var(--primary-brown-light) !important;
  color: #fff !important;
  font-weight: bold;
}

.el-table__row:hover > td.el-table__cell {
  background-color: #f0e6da !important;
}

.el-pagination {
  margin-top: 1.5em;
  justify-content: flex-end;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--primary-brown) !important;
  color: #fff;
}

.el-menu-item.is-active {
  color: var(--primary-brown-dark) !important;
  background-color: #f0e6da !important;
}

.el-menu-item:hover, .el-sub-menu__title:hover {
  background-color: #f9f6f2 !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-brown-light);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-brown);
}

@media (max-width: 900px) {
  .el-card, .card {
    padding: 1em;
  }
}
